<!-- 根组件 -->
<script setup lang="ts">
import { RouterView } from 'vue-router'
import SidebarView from './views/SidebarView.vue'
</script>

<template>
  <SidebarView id="sidebar" />
  <RouterView id="router" />
</template>

<style>
/* 整体弹性布局 */
#app {
  display: flex;
  width: 80%;
  margin: 10px auto;
  /* border: 3px solid black; */
}
/* 导航框 */
#sidebar {
  border: 1px solid #ccc;
  background-color: white;
  width: 20%;
  padding: 10px;
  border-radius: 10px 0 0 10px; /* 左上角和左下角圆角 */
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

/* 路由框 */
#router {
  flex: 1; /* 占剩余的全部空间 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 0 10px 10px 0; /* 右上角和右下角圆角 */
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
</style>
